<template>
  <div name="OpenStatistics">
    <div class="s-OpenStatistics echart-content">
      <div class="title-content">
        <dsfimg :src="logoimg" :error-src="config.setting_img" />
      </div>
      <div class="echart-content">
        <div class="opendata-box">
          <div class="item">
            <h6>开发目录数</h6>
            <p>{{ OpenDate.cataOnlineNum }}</p>
          </div>
          <div class="item">
            <h6>访问量</h6>
            <p>{{ OpenDate.totalVisitedNum }}</p>
          </div>
          <div class="item">
            <h6>今日登录数</h6>
            <p>{{ OpenDate.otherNum }}</p>
          </div>
          <div class="item">
            <h6>资源申请量</h6>
            <p>{{ OpenDate.totalApplyNum }}</p>
          </div>
          <div class="item">
            <h6>资源对接量</h6>
            <p>{{ OpenDate.cataJoinNum }}</p>
          </div>
        </div>
        <div class="openechart-box">
          <div class="itembox-row itembox-row3">
            <div class="item-left">
              <div class="e-item">
                <p>平台访问历史</p>
                <div class="item" ref="AccessHistory"></div>
              </div>
            </div>
            <div class="item-right">
              <div class="e-item">
                <p>资源对接统计</p>
                <div class="item" ref="ResourcesTotal"></div>
              </div>
              <div class="e-item">
                <p>资源目录收藏榜</p>
                <div class="item" ref="queryCollectNum">3</div>
              </div>
            </div>
          </div>
          <div class="itembox-row itembox-row2">
            <div class="e-item">
              <p>可开放目录数</p>
              <div class="item" ref="QueryOpenCatalogNum"></div>
            </div>
            <div class="e-item">
              <p>资源格式比例</p>
              <div class="item" ref="ResourcesFormat"></div>
            </div>
          </div>
          <div class="itembox-row itembox-row1">
            <div class="e-item">
              <p>主题资源目录统计</p>
              <div class="item" ref="QueryGovResourceNum"></div>
            </div>
          </div>
          <div class="itembox-row itembox-row2">
            <div class="e-item">
              <p>数据交换TOP10</p>
              <div class="item" ref="QueryDataTop"></div>
            </div>
            <div class="e-item">
              <p>API调用TOP10</p>
              <div class="item" ref="QueryApiTop"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import echarts from "echarts";
export default {
  name: "headers",
  data() {
    return {
      logoimg: require("@/assets/imgs/pc/opentotle/echartlogo.png"),
      OpenDate: [],
      chartsAccessHistory: "",
      ResourcesTotal: "",
      queryCollectNum: "",
      QueryOpenCatalogNum: "",
      ResourcesFormat: "",
      QueryGovResourceNum: "",
      QueryDataTop: "",
      QueryApiTop: "",
    };
  },
  created() {
    // this.$nextTick(function () {
    // });
    this.init();
  },
  methods: {
    init() {
      let _this = this;
      // this.topStatistics();
      // this.getAccessHistory(); //访问历史
      // this.getResourcesTotal(); //资源对接统计
      // this.getQueryCollectNum(); //资源目录收藏榜
      // this.getQueryOpenCatalogNum(); //可开放目录数
      // this.getResourcesFormat(); //资源格式比例
      // this.getQueryGovResourceNum(); //主题资源目录统计
      // this.getQueryDataTop(); //数据交换TOP10
      // this.getQueryApiTop(); //API调用TOP10

      window.onresize = function () {
        // _this.chartsAccessHistory.resize();
        // _this.ResourcesTotal.resize();
        // _this.queryCollectNum.resize();
        // _this.QueryOpenCatalogNum.resize();
        // _this.ResourcesFormat.resize();
        // _this.QueryGovResourceNum.resize();
        // _this.QueryDataTop.resize();
        // _this.QueryApiTop.resize();
      };
    },
    topStatistics() {
      this.$http
        .get("/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/topStatistics")
        .then((res) => {
          if (res.code == 0) {
            this.OpenDate = res.data[0];
          }
        })
        .catch((err) => {
          console.log(err.message || "数据异常");
        });
    },
    getEData(apiUrl) {
      return new Promise((resolve, reject) => {
        this.$http
          .get(apiUrl)
          .then((res) => {
            if (res.code == 0) {
              resolve(res);
            } else {
              reject(res.msg || "数据异常");
            }
          })
          .catch((err) => {
            console.log(err.message || "数据异常");
          });
      });
    },
    // 显示echart图模板方法() {
    //   let _this = this;
    //   this.getEData("/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/statistics/getTotalNum")
    //     .then(res => {
    //       let sd = res.data;
    //       this.ResourcesTotal = echarts.init(this.$refs.ResourcesTotal);
    //       this.ResourcesTotal.setOption({
    //         xAxis: { type: "category", data: ["Mon", "Tue"] },
    //         yAxis: { type: "value" },
    //         series: [{ data: [666, 888], type: "line" }],
    //       });
    //     })
    //     .catch(err => {
    //       console.log("数据异常");
    //     });
    // },
    getAccessHistory() {
      let _this = this;
      this.getEData(
        "/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/queryvisitedhistorynum"
      )
        .then((res) => {
          let sd = res.data;
          // this.chartsAccessHistory = echarts.init(this.$refs.AccessHistory);
          this.chartsAccessHistory.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                label: {
                  backgroundColor: "#6a7985",
                },
              },
            },
            legend: {
              data: [
                { name: sd.scode1, textStyle: { color: "#fff" } },
                { name: "资源访问次数", textStyle: { color: "#fff" } },
              ],
            },
            toolbox: {},
            grid: {
              left: "3%",
              right: "5%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: [
              {
                type: "category",
                boundaryGap: false,
                data: sd.stime.reverse(),
                axisLine: {
                  lineStyle: {
                    color: "#fff",
                  },
                },
              },
            ],
            yAxis: [
              {
                type: "value",
                axisLine: {
                  lineStyle: {
                    color: "#fff",
                  },
                },
              },
            ],
            series: [
              {
                name: "资源访问次数",
                type: "line",
                stack: "总量",
                label: {
                  normal: {
                    show: true,
                    position: "top",
                  },
                },
                itemStyle: {
                  normal: {
                    color: "red",
                  },
                },
                areaStyle: { normal: {} },
                data: sd.num2.reverse(),
                smooth: true,
              },
              {
                name: "平台访问次数",
                type: "line",
                stack: "总量",
                itemStyle: {
                  normal: {
                    color: "green",
                  },
                },
                areaStyle: { normal: {} },
                data: sd.num1.reverse(),
                smooth: true,
              },
            ],
          });
        })
        .catch((err) => {
          console.log("数据异常");
        });
    },
    getResourcesTotal() {
      let _this = this;
      this.getEData(
        "/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/statistics/getTotalNum"
      )
        .then((res) => {
          let sd = res.data[0];
          // this.ResourcesTotal = echarts.init(this.$refs.ResourcesTotal);
          this.ResourcesTotal.setOption({
            color: ["#3398DB"],
            tooltip: {
              trigger: "axis",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
              },
              formatter: "{b} ：  {c} ",
            },
            grid: {
              top: "3%",
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: [
              {
                type: "category",
                data: ["数据集", "文件", "接口"],
                axisTick: {
                  alignWithLabel: true,
                },
                axisLine: {
                  lineStyle: {
                    color: "#fff",
                  },
                },
              },
            ],
            yAxis: [
              {
                type: "value",
                axisLine: {
                  lineStyle: {
                    color: "#fff",
                  },
                },
              },
            ],
            series: [
              {
                type: "bar",
                barWidth: "30",
                data: [sd.dataJoinNum, sd.fileJionNum, sd.interJoinNum],
              },
            ],
          });
        })
        .catch((err) => {
          console.log("数据异常");
        });
    },
    getQueryCollectNum() {
      let _this = this;
      this.getEData(
        "/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/queryCollectNum"
      )
        .then((res) => {
          var sd = res.data.collectnum;
          var textarrbox = [];
          var textardata = {};

          var filearrbox = [];
          var filedata = {};
          for (var i = 0, len = sd.length; i < len; i++) {
            if (sd[i].name.length > 10) {
              sd[i].name = sd[i].name.substr(0, 10) + "...";
            }

            textardata = {
              name: sd[i].name,
              textStyle: { color: "#fff" },
            };
            textarrbox.push(textardata);

            filedata = {
              value: sd[i].cotnum,
              name: sd[i].name,
            };
            filearrbox.push(filedata);
          }
          // this.queryCollectNum = echarts.init(this.$refs.queryCollectNum);
          this.queryCollectNum.setOption({
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)",
            },
            legend: {
              orient: "vertical",
              left: "left",
              data: textarrbox,
            },
            series: [
              {
                name: "访问来源",
                type: "pie",
                radius: "55%",
                center: ["50%", "60%"],
                data: filearrbox,
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
              },
            ],
          });
        })
        .catch((err) => {
          console.log("数据异常");
        });
    },
    getQueryOpenCatalogNum() {
      let _this = this;
      this.getEData(
        "/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/queryOpenCatalogNum"
      )
        .then((res) => {
          var sd = res.data;
          var montharr = [];
          for (var i = 1; i < 13; i++) {
            montharr.push(i + "月");
          }
          // this.QueryOpenCatalogNum = echarts.init(this.$refs.QueryOpenCatalogNum);
          this.QueryOpenCatalogNum.setOption({
            color: ["#3398DB"],
            tooltip: {
              trigger: "axis",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
              },
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: [
              {
                type: "category",
                data: montharr,
                axisTick: {
                  alignWithLabel: true,
                },
                axisLine: {
                  lineStyle: {
                    color: "#fff",
                  },
                },
              },
            ],
            yAxis: [
              {
                type: "value",
                axisLine: {
                  lineStyle: {
                    color: "#fff",
                  },
                },
              },
            ],
            series: [
              {
                name: "可开放目录数",
                type: "bar",
                barWidth: "60%",
                data: sd.num,
              },
            ],
          });
        })
        .catch((err) => {
          console.log("数据异常");
        });
    },
    getResourcesFormat() {
      let _this = this;
      this.getEData(
        "/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/statistics/getTotalNum"
      )
        .then((res) => {
          let sd = res.data[0];
          // this.ResourcesFormat = echarts.init(this.$refs.ResourcesFormat);
          this.ResourcesFormat.setOption({
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b}: {c} ({d}%)",
            },
            legend: {
              orient: "vertical",
              x: "left",
              data: [
                { name: "接口", textStyle: { color: "#fff" } },
                { name: "文件", textStyle: { color: "#fff" } },
                { name: "数据集", textStyle: { color: "#fff" } },
              ],
            },
            series: [
              {
                name: "资源格式",
                type: "pie",
                radius: ["50%", "70%"],
                center: ["50%", "50%"],
                color: ["#0E7CE2", "#FF8352", "#E271DE"],
                data: [
                  { value: sd.interOnlineNum, name: "接口" },
                  { value: sd.fileOnlineNum, name: "文件" },
                  { value: sd.dataOnlineNum, name: "数据集" },
                ],
                labelLine: {
                  normal: {
                    show: true,
                    length: 20,
                    length2: 20,
                    lineStyle: {
                      color: "#12EABE",
                      width: 2,
                    },
                  },
                },
                label: {
                  normal: {
                    formatter: "{c|{b}}\n{d|{d}%}",
                    rich: {
                      b: {
                        fontSize: 16,
                        color: "#fff",
                        align: "left",
                        padding: 4,
                      },
                      d: {
                        fontSize: 16,
                        color: "#fff",
                        align: "left",
                        padding: 2,
                      },
                      c: {
                        fontSize: 16,
                        color: "#fff",
                        align: "left",
                        padding: 2,
                      },
                    },
                  },
                  emphasis: {
                    show: true,
                    textStyle: {
                      fontSize: "30",
                      fontWeight: "bold",
                    },
                  },
                },
              },
            ],
          });
        })
        .catch((err) => {
          console.log("数据异常");
        });
    },
    getQueryGovResourceNum() {
      let _this = this;
      this.getEData(
        "/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/queryGovResourceNum"
      )
        .then((res) => {
          let sd = res.data;
          // this.QueryGovResourceNum = echarts.init(this.$refs.QueryGovResourceNum);
          this.QueryGovResourceNum.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                crossStyle: {
                  color: "#999",
                },
              },
            },
            legend: {
              data: [
                { name: "接口", textStyle: { color: "#fff" } },
                { name: "数据集", textStyle: { color: "#fff" } },
                { name: "文件", textStyle: { color: "#fff" } },
              ],
            },
            xAxis: [
              {
                type: "category",
                data: sd.datanum.name.slice(0, 10),
                axisPointer: {
                  type: "shadow",
                },
                axisLine: {
                  lineStyle: {
                    color: "#00C1DE",
                  },
                },
                axisLabel: {
                  interval: 0, //横轴信息全部显示
                  rotate: -15, //-30度角倾斜显示
                },
              },
            ],
            yAxis: [
              {
                type: "value",
                name: "数据：个",
                interval: 100,
                axisLine: {
                  lineStyle: {
                    color: "#00C1DE",
                  },
                },
              },
            ],
            series: [
              {
                name: "接口",
                type: "bar",
                data: sd.internum.num.slice(0, 10),
                itemStyle: {
                  normal: {
                    color: "#D69166",
                  },
                },
              },
              {
                name: "数据集",
                type: "bar",
                data: sd.datanum.num.slice(0, 10),
                itemStyle: {
                  normal: {
                    color: "#3C9B92",
                  },
                },
              },
              {
                name: "文件",
                type: "bar",
                data: sd.filenum.num.slice(0, 10),
                itemStyle: {
                  normal: {
                    color: "#2ba5ff",
                  },
                },
              },
            ],
          });
        })
        .catch((err) => {
          console.log("数据异常");
        });
    },
    getQueryDataTop() {
      let _this = this;
      this.getEData(
        "/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/queryDataTop"
      )
        .then((res) => {
          var sd = res.top;
          var totalarr = [],
            totaltextarr = [];

          for (var i = 0, len = sd.length; i < len; i++) {
            totalarr.push(sd[i].total);
            if (sd[i].name.length > 10) {
              totaltextarr.push(sd[i].name.substr(0, 10) + "...");
            } else {
              totaltextarr.push(sd[i].name);
            }
          }
          // this.QueryDataTop = echarts.init(this.$refs.QueryDataTop);
          this.QueryDataTop.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            legend: {
              data: [{ name: "2012年", textStyle: { color: "#fff" } }],
            },
            grid: {
              top: "3%",
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01],
              axisLine: {
                lineStyle: {
                  color: "#fff",
                },
              },
            },
            yAxis: {
              type: "category",
              data: totaltextarr.reverse(),
              axisLine: {
                lineStyle: {
                  color: "#fff",
                },
              },
            },
            series: [
              {
                type: "bar",
                barWidth: "16",
                label: {
                  normal: {
                    textStyle: {
                      color: "rgba(255, 255, 255, 0.3)",
                    },
                  },
                },
                data: totalarr.reverse(),
                itemStyle: {
                  normal: {
                    color: "#7D96BA",
                  },
                },
              },
            ],
          });
        })
        .catch((err) => {
          console.log("数据异常");
        });
    },
    getQueryApiTop() {
      let _this = this;
      this.getEData(
        "/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/queryApiTop"
      )
        .then((res) => {
          var sd = res.top;
          var totalarr = [],
            totaltextarr = [];
          for (var i = 0, len = sd.length; i < len; i++) {
            totalarr.push(sd[i].total);
            if (sd[i].name.length > 10) {
              totaltextarr.push(sd[i].name.substr(0, 10) + "...");
            } else {
              totaltextarr.push(sd[i].name);
            }
          }
          // this.QueryApiTop = echarts.init(this.$refs.QueryApiTop);
          this.QueryApiTop.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            legend: {
              data: [{ name: "2011年", textStyle: { color: "#fff" } }],
            },
            grid: {
              top: "3%",
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01],
              axisLine: {
                lineStyle: {
                  color: "#fff",
                },
              },
            },
            yAxis: {
              type: "category",
              data: totaltextarr.reverse(),
              axisLine: {
                lineStyle: {
                  color: "#fff",
                },
              },
            },
            series: [
              {
                type: "bar",
                barWidth: "16",
                data: totalarr.reverse(),
                itemStyle: {
                  normal: {
                    color: "#7D96BA",
                  },
                },
              },
            ],
          });
        })
        .catch((err) => {
          console.log("数据异常");
        });
    },
  },
};
</script>
